<!-- 任务二级页面 --> 任务详情 -->
<template>
  <view class="taskState">
    <view class="bg"/>
    <view class="stateBox">
      <uni-steps :options="list1" :active="active" active-color='#64c0b1'/>
    </view>
    <view class="operateBtn">
      <view class="btnBox" @click="goTaskDetail()" :class="{ 'disabled': nznjIsDisabled }">
        <view class="BtnIcon">
          <image class="iconSize" src="../../static/icons/盒子.png"  mode=""></image>
        </view>
        <view class="Btn">
          {{isDisabled=== 1 ?'物资申请':isDisabled=== 2 ? '物资补充':'已上限'}}
        </view>
      </view>
<!--      <view class="btnBox">
        <view class="BtnIcon">
          <image class="iconSize" src="../../static/icons/w_画盘.png" mode=""></image>
        </view>
        <view class="Btn">
          操作
        </view>
      </view> -->
      <view class="btnBox" @click="goReport()" :class="{ 'disabled': reportIsDisabled }">
        <view class="BtnIcon">
          <image class="iconSize" src="../../static/icons/确认.png" mode=""></image>
        </view>
        <view class="Btn">
          完成上报
        </view>
      </view>
    </view>
  <!-- 操作列表 -->
  <view class="listBox">
    <!-- 任务详情 -->
    <view class="taskList">
      <div class="rectangle">
        任务详情
        <div class="triangle"></div>
      </div>
      <view class="taskName">
        任务名称：<text>{{detailRes[0].name}}</text>
      </view>
      <view class="taskTime">
        任务时间：<text>{{detailRes[0].startTime !== undefined ? detailRes[0].startTime : '' }} 至</text> <br/>  <text class="textTime">{{detailRes[0].endTime}}</text>
      </view>
      <view class="taskUser">
        执行人：<text>{{detailRes[0].executor}}</text>
      </view>
      <view class="taskArea">
        操作区域：<text>{{detailRes[0].landName}}</text>
      </view>
      <view class="createTime">
        发布时间：<text>{{detailRes[0].createTime}}</text>
      </view>
    </view>
    <!-- 农资农机 -->
    <view class="taskList-nznj" v-if="nznjopenstate">
      <view class="rectangle">
        农机农资
        <view class="triangle"></view>
      </view>
      <view class="nznj" v-for="item in detailRes[1]" :key="item.id">
        <view class="nznjName">
          {{item.type === 1 ? '农机':'农资'}}名称：<text>{{item.name}}</text>
        </view>
        <view class="nznjNum">
          {{item.type === 1 ? '农机编号':'农资数量'}}：<text>{{item.number}}</text>
        </view>
      </view>
    </view>
    
    <!-- 补充 -->
    <view class="taskList-nznj" v-if="supplement">
      <view class="rectangle" style="background-color: #2a82e4;">
        补充
        <view class="triangle"></view>
      </view>
      <view class="nznj" v-for="item in detailRes[3]" :key="item.id">
        <view class="nznjName">
          {{item.type === 1 ? '农机':'农资'}}名称：<text>{{item.name}}</text>
        </view>
        <view class="nznjNum">
          {{item.type === 1 ? '农机编号':'农资数量'}}：<text>{{item.number}}</text>
        </view>
      </view>
    </view>
    <!-- 完成上报 -->
    <view class="taskList-report" v-if="report">
      <view class="rectangle">
        完成上报
        <view class="triangle"></view>
      </view>
      <view class="report">
        <view>
         完成时间：<text>{{detailRes[2].time}}</text>
        </view>
        <view>
         实际用时：<text>{{detailRes[2].useTime}}</text>
        </view>
        <view>
         备注：<text>{{detailRes[2].remark}}</text>
        </view>
        
      <view class="pic-box">
         <view class="pic-tit">
           图片：
         </view>
         <div class="pic">
           <image class="img" :src="blobToImage(detailRes[2].picture)"></image>
         </div>
        </view>
        
      </view>
    </view>
    </view>
  </view>

</template>

<script>
  import {getTaskDetailApi} from '@/api/task.js'
  export default {
    data() {
      return {
        active:1,
        list1: [{
        					title: '任务发布'
        				}, {
        					title: '进行中'
        				}, {
        					title: '已完成'
        				}],
                getApiId:'',
                detailRes:[],
                nznjopenstate:false,//农机农资list
                supplement:false,//补充list
                report:false,//完成报告list
                imgSrc:'',
                nznjIsDisabled: false,
                reportIsDisabled: true, 
                isDisabled:1, //按钮状态 1：物资申请 2：物资补充 3：已上限
         }
    },
    methods: {
      change() {
      				if (this.active < this.list1.length - 1) {
      					this.active += 1
      				} else {
      					this.active = 0
      				}
      			},
            // 物资申请页面
            goTaskDetail() {
              uni.navigateTo({
                url: `/pages/taskDetail/taskDetail?id=${this.getApiId}&resLength=${this.detailRes[1].length}`
              });
            },
            // 完成上报页面
            goReport() {
              uni.navigateTo({
                url: `/pages/taskReport/taskReport?id=${this.getApiId}`
              });
            },
            // 页面数据
           async getTaskDetail(id) {
              const res = await getTaskDetailApi(id) 
              this.detailRes= res.data
              this.nznjopen()
              // console.log(res.data[1]);
              // res.data[0] 任务详情
              // res.data[1] 物资申请
              // res.data[2] 完成上报
              // res.data[3] 补充
            },
       blobToImage(pic) {
        const base64 = `data:image/png;base64,${pic}`
        // console.log(pic);
        return base64
    },
            nznjopen() {
              console.log(this.detailRes);
              // 判断页面状态
              if (this.detailRes[1].length > 0 && this.detailRes[2] !== null &&this.detailRes[3].length > 0) {
                //物资申请长度大于0，完成上报不为null，补充长度大于0----页面状态->完成
                 this.active = 2
              } else if (this.detailRes[1].length > 0 && this.detailRes[2] === null &&this.detailRes[3].length >= 0) {
                //物资申请长度大于0，完成上报为null，补充长度大于0----页面状态->进行中
                this.active = 1
              } else {
                this.active = 0
              }
              // 申请物资判断
              if(this.detailRes[1].length > 0) {  
                // 物资申请长度大于0
                // this.active = 1
                // 农资农机list显示
                this.reportIsDisabled = false
                this.isDisabled = 2
                this.nznjopenstate = true
              } else {
                this.isDisabled = 1
                this.nznjopenstate = false
              }
              // 完成上报判断
              if(this.detailRes[2] !== null) {
                this.active = 2
                this.report = true
                // 按钮全禁用，物资按钮文本设置为初始
                this.isDisabled = 1
                this.reportIsDisabled = true
                this.nznjIsDisabled = true
              } else {
                 this.report = false
              }
              // 补充物资判断
              if(this.detailRes[3].length > 0) {
                // 补充数组长度大于0，按钮文字变已上限，物资按钮禁用
                this.supplement = true
                this.isDisabled = 3
                this.nznjIsDisabled = true
              } else {
                 this.supplement = false
              }
            }
    },
    mounted() {
      this.getTaskDetail(this.getApiId)
    },
    onShow() {
      this.getTaskDetail(this.getApiId)
    },
     onLoad(query) {
        this.getApiId = query.id;
      }
  }
</script>

<style lang="scss">
  .taskState {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 20rpx;
  }
  .bg {
      position: absolute;
      left: -40%;
      top: -12%;
      width: 1351rpx;
      height: 711rpx;
      border-radius: 50%;
      margin-top: -261rpx;
      overflow: hidden;
      background: linear-gradient(110deg, #80efb1 0%, #64c0b1 100%);
      z-index: -1;
  }
  .stateBox {
    width: 100%;
    height: 160rpx;
    margin-top: 70rpx;
  }
  .operateBtn {
    display: flex;
    justify-content: space-around;
    width: 638rpx;
    height: 170rpx;
    box-shadow: 5rpx 5rpx 10rpx #ccc;
    border-radius: 15rpx;
    background-color: #fff;
    margin: -30rpx 55rpx 0;
    text-align: center;
    .btnBox {
      width: 120rpx;
      height: 140rpx;
      // background-color: greenyellow;
      font-size: 26rpx;
      text-align: center;
    }
    
    .BtnIcon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          background-color: #46d48d;
          text-align: center;
          line-height: 40rpx;
          margin:14rpx 20rpx 0;
          padding: 16rpx 0;
         .iconSize {
         width: 48rpx;
         height: 48rpx;
        }
      }
      .Btn {
        // width: 150rpx;
        margin-top: 10rpx;
        // text-align: center;
      }
    
  }
  
  .listBox {
    width: 100%;
    // 列表标签
    .rectangle {
      width: 200rpx;
      height: 60rpx;
      position: relative;
      position: absolute;
      background-color: #ffc300;
      border-radius: 15rpx;
      text-align: center;
      line-height: 60rpx;
      color: #fff !important;
      top: -10rpx;
      right: 0;
    }
    .triangle {
      width: 0;
      height: 0;
      border-top: 30rpx solid transparent;
      border-bottom: 30rpx solid transparent;
      border-left: 30rpx solid white;
      position: absolute;
      top: -20%;
      left: 0;
      // transform: translateX(-50%);
    }
    // 任务详情
    .taskList {
      height: 426rpx;
      width: 92%;
      margin: 26rpx auto;
      border-radius: 15rpx;
      box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.3);  
      position: relative;
      padding:26rpx 26rpx ;
      view {
        color: #b6b6b6;
        margin: 18rpx 0;
      }
      text {
        color: #666;
        width: 50%;
      }
      .textTime {
        margin-left: 25%;
        // display: inline-block;
      }
    }
    // 农资农机
    .taskList-nznj {
      height: 296rpx;
      width: 92%;
      margin: 26rpx auto;
      border-radius: 15rpx;
      box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.3);  
      position: relative;
      padding:26rpx 26rpx ;
      // overflow: hidden;
      overflow: auto;
      view {
        color: #b6b6b6;
        margin: 10rpx 0;
      }
      text {
        color: #666;
        width: 50%;
      }
      .textTime {
        margin-left: 25%;
        // display: inline-block;
      }
    }
    
    .taskList-report {
      height: 416rpx;
      width: 92%;
      margin: 26rpx auto 50rpx;
      border-radius: 15rpx;
      box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.3);  
      position: relative;
      padding:50rpx 26rpx 20rpx;
      overflow: hidden;
      view {
        color: #b6b6b6;
        margin: 10rpx 0;
      }
      text {
        color: #666;
        width: 50%;
      }
      .textTime {
        margin-left: 25%;
        // display: inline-block;
      }
      .pic-box {
        display: flex;
        height: 180rpx;
        line-height: 180rpx;
      }
      .pic-tit {
        height: 180rpx;
        line-height: 180rpx;
        text-align: center;
      }
      .img {
        width: 180rpx;
        height: 180rpx;
        text-align: center;
      }
    }
  }
.disabled {
  pointer-events: none; /* 禁用鼠标事件，在微信小程序中生效 */
.BtnIcon {
  background-color: #ccc;
}
}
  </style>
